<html>
<head>
    <title>后台管理系统</title>
    <meta charset="UTF-8">
    <script src="../scripts/jquery.min.js"></script>
    <script src="../scripts/miniui/miniui.js"></script>
    <link rel="stylesheet" href="../scripts/miniui/themes/default/miniui.css">
</head>
<script type="text/javascript">
    mini.parse();

    var tree = mini.get("leftTree");

    function showTab(node) {
        var tabs = mini.get("mainTabs");

        var id = "tab$" + node.id;
        var tab = tabs.getTab(id);
        if (!tab) {
            tab = {};
            tab._nodeid = node.id;
            tab.name = id;
            tab.title = node.text;
            tab.showCloseButton = true;

            //这里拼接了url，实际项目，应该从后台直接获得完整的url地址
            tab.url = node.url;

            tabs.addTab(tab);
        }
        tabs.activeTab(tab);
    }

    function onNodeSelect(e) {
        var node = e.node;
        var isLeaf = e.isLeaf;

        if (isLeaf) {
            showTab(node);
        }
    }

    function onClick(e) {
        var text = this.getText();
        alert(text);
    }
    function onQuickClick(e) {
        tree.expandPath("datagrid");
        tree.selectNode("datagrid");
    }

    function onTabsActiveChanged(e) {

    }
</script>

<body>
<div class="mini-splitter" style="width:100%;height:100%;">
    <div size="180" maxSize="250" minSize="100" showCollapseButton="true" style="border:0;">
        <!--OutlookTree-->
        <div id="leftTree" class="mini-outlooktree" url="../data/outlooktree.txt" onnodeclick="onNodeSelect"
             textField="text" idField="id" parentField="pid">
        </div>

    </div>
    <div showCollapseButton="false" style="border:0;">
        <!--Tabs-->
        <div id="mainTabs" class="mini-tabs" activeIndex="2" style="width:100%;height:100%;"
             plain="false" onactivechanged="onTabsActiveChanged">
            
        </div>
    </div>
</div>
</body>
</html>